<!-- 案例维度统计-列表 -->
<template>
  <div class="list-body">
    <van-search class="search" show-action v-model="keyword" shape="round" placeholder="请输入违规事项或违规内容关键字">
      <template #action>
        <div class="cus-action">
          <span @click="handleFilter" :style="coulist.length > 0 ? 'color:#3975C6;' : 'color:#666666;'">
            {{ coulist.length > 0 ? `已选${coulist.length}` : '筛选' }}
          </span>
          <van-icon :name="showFilterPop ? 'arrow-up' : 'arrow-down'"
            :class="coulist.length > 0 ? 'cus-icon icon-col' : 'cus-icon'" />
        </div>
      </template>
    </van-search>
    <!-- <van-loading size="24px" style="position: relative;top: 3%;" v-if="listLoading" vertical>
      加载中...v-else
    </van-loading> -->
    <div class="tabs-list">
      <van-list v-if="caseList.length > 0" v-model="listLoading" :finished="finished"
        :finished-text="this.searchQry.pagenum > 1 ? '到底了' : ''" @load="onLoad">
        <div class="item" v-for="item in caseList" :key="item.id" @click="openDetail(item)">
          <div class="item-info">
            <div class="info-name">违规事项：{{ item.PROBLEM || '-' }}</div>
            <div class="subname">任务起止日期：{{ item.START_TM || '-' }}至{{ item.END_TM || '-' }}</div>
            <!-- <div class="info-status">
              <span v-if="item.status == -1" class="stu1">已缺考</span>
              <span v-else-if="item.status == 0" class="stu2">未开始</span>
              <span v-else-if="item.status == 1" class="stu3">未答题</span>
              <span v-else class="stu4">已答题：<span>90分</span></span>
            </div> -->
          </div>
          <div class="info-con">
            <div class="row">
              <span class="row-tit">派发人数</span>
              <span class="con-col">{{ !item.TOTAL_NUM || item.TOTAL_NUM == '-' ? 0 : item.TOTAL_NUM }}</span>
              <span class="row-tit">未学人数</span>
              <span class="con-col">
                {{ !item.UNFINISHED_NUM || item.UNFINISHED_NUM == '-' ? 0 : item.UNFINISHED_NUM }}
              </span>
            </div>
            <div class="row">
              <span class="row-tit">超期完成人数</span>
              <span class="con-col">
                {{ !item.FINISHED_LATE_NUM || item.FINISHED_LATE_NUM == '-' ? 0 : item.FINISHED_LATE_NUM }}
              </span>
              <span class="row-tit">期限内完成人数</span>
              <span class="con-col">
                {{ !item.FINISHED_ONTIME_NUM || item.FINISHED_ONTIME_NUM == '-' ? 0 : item.FINISHED_ONTIME_NUM }}
              </span>
            </div>
            <div class="row">
            </div>
          </div>
          <div class="item-ops">
            <span class="name">派发人：{{ item.EMPE_NM || '-' }}@{{ item.FGS || '-' }} - {{ item.YYB || '-' }}</span>
          </div>
          <!--<van-divider :style="{ color: '#1989fa', borderColor: '#DEDEDE' }">
            </van-divider>
          <div class="item-ops">
            <span class="name">派发人：{{ item.name }}</span>
            <van-button type="info" size="small" v-if="item.status == 2">查看测评</van-button>
            <van-button type="info" size="small" v-else :disabled="item.status !== 1">开始答题</van-button>
          </div> -->
        </div>
      </van-list>
      <van-empty v-else description="暂无数据" />
    </div>
    <van-popup class="filter-pop" v-model="showFilterPop">
      <StatisticsPop :show="showFilterPop" type="unasq" @on-emit="getQry"></StatisticsPop>
    </van-popup>
  </div>
</template>

<script>
import { getCaseData } from '@/api/case'
import StatisticsPop from './components/statisticsPop.vue'
export default {
  name: 'caseStatistics',
  components: { StatisticsPop },
  props: {
    list: {
      type: Array,
      default: () => {
        return []
      }
    },
    orgid: {
      type: String,
      default: ''
    }
  },
  data() {
    return {
      keyword: "",
      showFilterPop: false,
      listLoading: true,
      finished: false,
      timer: null,
      caseList: [],
      searchQry: {
        code: '80307',
        pagenum: 0,
        pagesize: 10,
        // sortdatafield,
        // sortorder,
      },
      qrydata: {
        NUM_TYPE: 1, // 固定值1	1按案例统计2按员工统计3案例学习明细4撤销任务
        VAR_DATE_FROM: '', // 开始时间	eg.20231101
        VAR_DATE_TO: '', // 结束时间	eg.20231114
        NUM_ORGID: '', // 机构代码（分/ 子公司）必传参数
        VAR_PROBLEMDESC: '', //主要违规事项？？？待确认
        // VAR_PROBLEM: '' //主要违规事项
        // VAR_EMPE: '', // 员工
        // VAR_DESCRIPTION 违规内容
      },
      timer: null,
      coulist: [],
    }
  },
  watch: {
    keyword(val) {
      if (this.timer) clearTimeout(this.timer)
      this.timer = setTimeout(() => {
        this.searchQry.pagenum = 0	//起始页（从0开始）	Y	
        this.searchQry.pagesize = 10	//每页条数	Y	
        this.caseList = []
        if (!val) {
          this.listLoading = true
          this.finished = false
          this.qrydata.VAR_PROBLEMDESC = ''
        } else {
          this.qrydata.VAR_PROBLEMDESC = val
        }
        this.getDataList()
      }, 1000)
    },
  },
  created() {
    this.caseList = []
    this.qrydata.NUM_ORGID = this.orgid || this.$route.query.orgid || ''
    this.getDataList()
  },
  mounted() { },
  methods: {
    getQry(objVal) {
      this.searchQry.pagenum = 0	//起始页（从0开始）	Y	
      this.searchQry.pagesize = 10	//每页条数	Y	
      this.listLoading = true
      this.finished = false
      this.showFilterPop = false
      this.caseList = []
      this.qrydata.VAR_DATE_FROM = objVal.start
      this.qrydata.VAR_DATE_TO = objVal.end
      this.qrydata.NUM_ORGID = objVal.orgid
      this.getDataList()
      this.coulist = []
      if (objVal.start && objVal.end) {
        this.coulist.push('a')
      }
      if (objVal.bname) {
        this.coulist.push('b')
      }
      if (objVal.cname) {
        this.coulist.push('c')
      }
      if (!objVal.start && !objVal.end && objVal.orgid == this.orgid) {
        this.coulist = []
      }
      this.coulist = Array.from(new Set(this.coulist))
    },
    handleFilter(val) {
      this.showFilterPop = !this.showFilterPop
    },
    onLoad() {
      this.searchQry.pagenum += 1
      this.getDataList()
    },
    async getDataList() {
      let qry = {
        ...this.searchQry,
        params: JSON.stringify(this.qrydata)
      }
      const resData = await getCaseData(qry)
      this.listLoading = false
      this.caseList = [...this.caseList, ...resData.data.VALUE_LIST]
      if (resData.data.VALUE_LIST.length < this.searchQry.pagesize) {
        this.finished = true
      }
    },
    openDetail(rowdata) {
      this.$router.push({
        path: '/caseStatisticsInfo',
        query: {
          type: 1, // 合规
          activeType: 'unasq',
          orgid: this.orgid || '',
          taskid: rowdata.TASKID,
          rowObj: JSON.stringify(rowdata)
        }
      })
    }
  }

}
</script>

<style scoped lang="less">
.list-body {
  height: 100%;

  /deep/ .search {
    height: 112px;

    .van-search__content {
      height: 72px;

      .van-field {
        display: flex;
        align-items: center;
        justify-content: center;

        .van-field__body {
          height: 100%;
        }
      }
    }

    .cus-action {
      display: flex;
      align-items: center;
      justify-content: center;

      .cus-icon {
        width: 28px;
        height: 28px;
        color: #bbb;
        margin-left: 6px;
        display: flex;
        align-items: center;
        justify-content: center;
      }

      .van-icon:before {
        vertical-align: middle;
        display: flex;
        align-items: center;
        justify-content: center;
      }

      .icon-col {
        color: #3975C6;
      }
    }
  }

  .tabs-list {
    height: calc(100% - 238px);
    overflow: auto;

    .item {
      padding: 40px 30px;
      margin-top: 20px;
      background: #fff;

      .item-info {
        display: flex;
        flex-direction: column;
        // justify-content: space-between;
        // align-items: center;
        font-family: SourceHanSansCN, SourceHanSansCN;

        .info-name {
          font-size: 28px;
          font-weight: 500;
          // line-height: 42px;
          margin-bottom: 24px;
          color: #333
        }

        .subname {
          font-weight: 400;
          font-size: 26px;
          color: #7F8389;
          // line-height: 40px;
          margin-bottom: 24px;

        }

        border-bottom: 2px solid #DEDEDE;

        .info-status {
          font-size: 24px;
          line-height: 36px;
          font-family: SourceHanSansCN, SourceHanSansCN;

          .stu1 {
            color: #C52026;
          }

          .stu2 {
            color: #EAA60F;
          }

          .stu3 {
            color: #397FF9;
          }

          .stu4 {
            color: #666;

            span {
              color: #397FF9;

            }
          }
        }
      }

      .info-con {
        // display: flex;
        // flex-direction: column;
        font-family: SourceHanSansCN, SourceHanSansCN;
        font-weight: 400;
        font-size: 26px;
        color: #5A4F4F;
        padding-top: 30px;

        .row {
          width: 100%;
          display: flex;
          // flex-direction: row;
          // justify-content: space-between;
          // min-height: 56px;
          // line-height: 40px;
          margin-bottom: 30px;
          font-size: 26px;

          &:last-child {
            margin-bottom: 0;
          }

          .row-tit {
            width: 400px;
            display: inline-block;
            color: #5A4F4F;
          }

          .con-col {
            width: calc(100% - 400px);
            display: inline-block;
            color: #7F8389;
            // text-align: right;
            display: -webkit-box;
            -webkit-box-orient: vertical;
            -webkit-line-clamp: 2;
            overflow: hidden;
          }
        }
      }

      .item-ops {
        display: flex;
        justify-content: space-between;
        align-items: center;

        .name {
          color: #7F8389;
          font-size: 26px;
          line-height: 40px;
        }

        /deep/ .van-button {
          background-color: #397FF9;
          height: 44px;
          font-size: 24px;
        }
      }
    }

    .item:last-child {
      margin-bottom: 20px;
    }
  }

  /deep/ .filter-pop {
    padding: 30px;
    width: 480px;
    max-width: 750px;
    height: calc(100% - 292px);
    bottom: 0;
    top: auto;
    left: auto;
    right: 0;
    left: auto;
    right: 0;
    min-height: auto;
    transform: none;
  }

  /deep/ .van-overlay {
    bottom: 0;
    top: auto;
    // left: auto;
    // max-width: 750px;
    // width: 100%;
    height: calc(100% - 232px);
  }
}

@media (min-width: 751px) {
  /deep/ .filter-pop {
    left: 50% !important;
  }
}
</style>